<template>
    <el-dialog
        v-model="dialogVisible"
        title="计算属性"
        width="60%"
        :close-on-click-modal="false"
        :before-close="handleClose"
    >
        <div class="setB">
            <div class="setL" v-if="TBindex!=null">
                <el-table :data="TB[TBindex].column" style="width: 100%" border height="350" @cell-dblclick="tableRow">
                    <el-table-column prop="name" label="字段名" width="150" />
                    <el-table-column prop="value" label="字段值" width="150" />
                </el-table>
            </div>
            <div class="setL" v-else-if="TBindex==null">
                <el-table :data="MT" style="width: 100%" border height="350" @cell-dblclick="tableRow">
                    <el-table-column prop="name" label="字段名" width="150" />
                    <el-table-column prop="value" label="字段值" width="150" />
                </el-table>
            </div>
            <div class="setC">
                <div>
                    <el-button size="small" @click="calmode('+')">+</el-button>
                </div>
                <div>
                    <el-button size="small" @click="calmode('-')">-</el-button>
                </div>
                <div>
                    <el-button size="small" @click="calmode('*')">*</el-button>
                </div>
                <div>
                    <el-button size="small" @click="calmode('/')">/</el-button>
                </div>
            </div>
            <div class="setR">
                <el-input type="textarea" v-model="str" rows="16" resize="none"></el-input>
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
              <el-button size="small" @click="cancel">取消</el-button>
              <el-button size="small" type="primary" @click="determine">
                确定
              </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
    import {ref,shallowRef} from "vue"
    let dialogVisible = ref(true)
    let str = shallowRef('')
    const props = defineProps({
        MT:{
            type:Object,
            required:false
        },
        TB:{
            type:Array,
            required:false
        },
        TBindex:{
            type:Number,
            required:false
        }
    })
    const emits = defineEmits(["shutDown"])
    const tableRow = (row)=>{
        if(str.value){
            str.value=str.value+' '+row.value
        }else{
            str.value=row.value
        }
        
    }
    const calmode = (item)=>{
        str.value=str.value+' '+item
    }
    const cancel = ()=>{
        emits('shutDown',false,'')
    }
    const determine = ()=>{
        if(str==''){
            return
        }
        emits('shutDown',false,str.value)
    }
    const handleClose=()=>{
        console.log("567890");
        cancel()
    }
</script>
<style scoped>
    .setB{
        display: flex;
    }
    .setR{
        flex: 1;
    }
    .setB>.setC{
        width: 70px;
        text-align: center;
        padding: 50px 0;
    }
    .setC>div{
        margin-bottom: 20px;
    }
</style>
